<template>
  <div class="order">
    <div class="order_header">
      <!-- logo -->
      <el-row>
        <el-col :span="4">
          <div class="order_icon">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dianpu" />
            </svg>
            <div style="  color: white;">八尺定制</div>
          </div>
        </el-col>
      </el-row>
      <!-- 搜索框 -->
      <el-row>
        <el-col :span="22" class="center">
          <el-input
            v-model="search"
            @focus="focus"
            @blur="blur"
            @keyup.enter.native="searchHandler"
            placeholder="搜索订单"
            prefix-icon="el-icon-search"
          >
            <el-button slot="append" icon="el-icon-search" id="search" @click="searchHandler"></el-button>
          </el-input>
          <!---设置z-index优先级,防止被走马灯效果遮挡-->
          <el-card
            @mouseenter="enterSearchBoxHanlder"
            v-if="isSearch"
            class="box-card"
            id="search-box"
            style="position:absolute;z-index:15"
          >
            <dl v-if="isHistorySearch">
              <dt class="search-title" v-show="history">历史搜索</dt>
              <dt class="remove-history" v-show="history" @click="removeAllHistory">
                <i class="el-icon-delete"></i>清空历史记录
              </dt>
              <el-tag
                v-for="search in historySearchList"
                :key="search.id"
                closable
                :type="search.type"
                @close="closeHandler(search)"
                style="margin-right:5px; margin-bottom:5px;"
              >{{search.name}}</el-tag>
              <dt class="search-title">热门搜索</dt>
              <dd v-for="search in hotSearchList" :key="search.id">{{search}}</dd>
            </dl>
            <dl v-if="isSearchList">
              <dd v-for="search in searchList" :key="search.id">{{search}}</dd>
            </dl>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="block">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            正在处理
            <i class="header-icon el-icon-info"></i>
          </template>
          <el-steps direction="vertical" :active="2" finish-status="success">
            <el-step title="设计"></el-step>
            <el-step title="排版"></el-step>
            <el-step title="打印" description="这是一段描述性文字"></el-step>
          </el-steps>
        </el-collapse-item>
        <el-collapse-item title="已完成订单">
          <div>暂无</div>
        </el-collapse-item>
        <el-collapse-item title="历史订单">
          <div>暂无</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import RandomUtil from '../../utils/randomUtil'
import Store from '../../utils/store'
export default {
  data() {
    return {
      search: '', //当前输入框的值
      isFocus: false, //是否聚焦
      hotSearchList: ['暂无热门搜索'], //热门搜索数据
      historySearchList: [], //历史搜索数据
      searchList: ['暂无数据'], //搜索返回数据,
      history: false,
      types: ['', 'success', 'info', 'warning', 'danger'], //搜索历史tag式样
    }
  },
  methods: {
    focus() {
      this.isFocus = true
      this.historySearchList =
        Store.loadHistory() == null ? [] : Store.loadHistory()
      this.history = this.historySearchList.length == 0 ? false : true
    },
    blur() {
      var self = this
      this.searchBoxTimeout = setTimeout(function () {
        self.isFocus = false
      }, 300)
    },
    enterSearchBoxHanlder() {
      clearTimeout(this.searchBoxTimeout)
    },
    searchHandler() {
      //随机生成搜索历史tag式样
      let n = RandomUtil.getRandomNumber(0, 5)
      let exist =
        this.historySearchList.filter((value) => {
          return value.name == this.search
        }).length == 0
          ? false
          : true
      if (!exist) {
        this.historySearchList.push({ name: this.search, type: this.types[n] })
        Store.saveHistory(this.historySearchList)
      }
      this.history = this.historySearchList.length == 0 ? false : true
    },
    closeHandler(search) {
      this.historySearchList.splice(this.historySearchList.indexOf(search), 1)
      Store.saveHistory(this.historySearchList)
      clearTimeout(this.searchBoxTimeout)
      if (this.historySearchList.length == 0) {
        this.history = false
      }
    },
    removeAllHistory() {
      Store.removeAllHistory()
    },
  },
  computed: {
    isHistorySearch() {
      return this.isFocus && !this.search
    },
    isSearchList() {
      return this.isFocus && this.search
    },
    isSearch() {
      return this.isFocus
    },
  },
}
</script>

<style>
.order_header {
  background: #f7c936;
  position: relative;
  width: 100%;
  height: 100px;
}
.order_icon {
  margin: 5px 15px;
  width: 80px;
  font-size: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.center {
  margin-left: 15px;
}
#search {
  background-color: #ffc300;
  border-radius: 0%;
}
.search-title {
  color: #bdbaba;
  font-size: 15px;
  margin-bottom: 5px;
}
.remove-history {
  color: #bdbaba;
  font-size: 15px;
  float: right;
  margin-top: -22px;
}
#search-box {
  width: 290px;
  height: 200px;
  margin-top: 0px;
  padding-bottom: 20px;
}
.block {
  height: 300px;
  margin: 20px;
}
</style>